<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Center canvas for high-DPI displays if needed, but for this simple case it's fine
        // const scale = window.devicePixelRatio;
        // canvas.width = 500 * scale;
        // canvas.height = 500 * scale;
        // canvas.style.width = '500px';
        // canvas.style.height = '500px';
        // ctx.scale(scale, scale);
        
        const cx = 250;
        const cy = 230; // Shift canvas content up to make space for caption
        const outerRadius = 160;
        const innerRadius = 110;

        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;

        // Draw the outer circle
        ctx.beginPath();
        ctx.arc(cx, cy, outerRadius, 0, 2 * Math.PI);
        ctx.stroke();

        // Draw the inner circle
        ctx.beginPath();
        ctx.arc(cx, cy, innerRadius, 0, 2 * Math.PI);
        ctx.stroke();

        // --- Draw r1 and its leader line ---
        const r1_angle = 220 * Math.PI / 180; // Angle in radians (~7 o'clock position)
        
        // Dashed line from near center to inner circle
        const r1_line_start_x = cx + 40 * Math.cos(r1_angle);
        const r1_line_start_y = cy + 40 * Math.sin(r1_angle);
        const r1_line_end_x = cx + innerRadius * Math.cos(r1_angle);
        const r1_line_end_y = cy + innerRadius * Math.sin(r1_angle);
        
        ctx.beginPath();
        ctx.setLineDash([6, 4]);
        ctx.moveTo(r1_line_start_x, r1_line_start_y);
        ctx.lineTo(r1_line_end_x, r1_line_end_y);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line
        
        // Small tick mark at the end of the r1 line
        const tick_length = 8;
        const tick_angle = r1_angle + Math.PI / 2;
        ctx.beginPath();
        ctx.moveTo(r1_line_end_x - tick_length * Math.cos(tick_angle), r1_line_end_y - tick_length * Math.sin(tick_angle));
        ctx.lineTo(r1_line_end_x + tick_length * Math.cos(tick_angle), r1_line_end_y + tick_length * Math.sin(tick_angle));
        ctx.stroke();

        // Draw the "r1" label
        const r1_label_x = cx + 80 * Math.cos(r1_angle);
        const r1_label_y = cy + 80 * Math.sin(r1_angle);
        ctx.fillStyle = 'black';
        ctx.font = 'italic 24px Times New Roman';
        ctx.fillText('r', r1_label_x, r1_label_y);
        ctx.font = 'italic 18px Times New Roman';
        ctx.fillText('1', r1_label_x + 9, r1_label_y + 5);

        // --- Draw r2 and the cross-section ---
        const r2_angle = 35 * Math.PI / 180; // Angle in radians (~1:30 o'clock position)
        const mid_radius = (outerRadius + innerRadius) / 2;
        
        // Ellipse for cross-section
        const ellipse_cx = cx + mid_radius * Math.cos(r2_angle);
        const ellipse_cy = cy + mid_radius * Math.sin(r2_angle);
        const ellipse_radius_x = (outerRadius - innerRadius) / 2;
        const ellipse_radius_y = ellipse_radius_x / 2.5;
        const ellipse_rotation = r2_angle + Math.PI / 2;
        
        ctx.beginPath();
        ctx.setLineDash([4, 3]);
        ctx.ellipse(ellipse_cx, ellipse_cy, ellipse_radius_x, ellipse_radius_y, ellipse_rotation, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.setLineDash([]);

        // Line for r2 radius
        const r2_line_end_x = ellipse_cx + ellipse_radius_x * Math.cos(ellipse_rotation);
        const r2_line_end_y = ellipse_cy + ellipse_radius_x * Math.sin(ellipse_rotation);
        ctx.beginPath();
        ctx.moveTo(ellipse_cx, ellipse_cy);
        ctx.lineTo(r2_line_end_x, r2_line_end_y);
        ctx.stroke();
        
        // Draw the "r2" label
        const r2_label_x = ellipse_cx + 25 * Math.cos(r2_angle - 25 * Math.PI/180);
        const r2_label_y = ellipse_cy + 25 * Math.sin(r2_angle - 25 * Math.PI/180);
        ctx.font = 'italic 24px Times New Roman';
        ctx.fillText('r', r2_label_x, r2_label_y);
        ctx.font = 'italic 18px Times New Roman';
        ctx.fillText('2', r2_label_x + 9, r2_label_y + 5);
        
        // Draw the caption
        ctx.font = '28px SimSun';
        ctx.textAlign = 'center';
        ctx.fillText('电图 3.3.1', cx, 470);

    </script>
</body>
</html>